<template>
  <div>
    <div class="btn">
      <el-button type="primary" @click="handleSave('form')" size="mini">保存</el-button>
    </div>
    <el-form ref="form" :model="controlMsgForm" label-width="138px" :rules="rules" style="padding: 0 40px;" label-position="left">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="主办单位" style="margin-bottom: 16px; margin-left: -9px" prop="organizer">
            <el-select v-model="controlMsgForm.organizer" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in organizeroptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否被委托管理" style="margin-bottom: 16px;" prop="isManaged">
            <el-select v-model="controlMsgForm.isManaged" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="管理单位" style="margin-bottom: 16px; margin-left: -9px" prop="manageOrgName">
            <el-select v-model="controlMsgForm.manageOrgName"
              size="small"
              filterable
              style="width: calc(100% - 9px); margin-left: 9px"
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectManageType"
              placeholder="请输入字段搜索"
            >
              <el-option
                v-for="item in managementOrgOption"
                :key="item.code"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产权取得方式" style="margin-bottom: 16px; margin-left: -9px" prop="propertySource">
            <el-select v-model="controlMsgForm.propertySource" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in propertySourceoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否办理产权登记" style="margin-bottom: 16px;" prop="isRegisterOutside">
            <el-select v-model="controlMsgForm.isRegisterOutside" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产权登记情形" style="margin-bottom: 16px;" prop="registerStatus">
            <el-select v-model="controlMsgForm.registerStatus" size="small" class="input" clearable>
              <el-option
                v-for="item in registerStatusoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="会计核算类型" style="margin-bottom: 16px; margin-left: -9px" prop="accountingType">
            <el-cascader
              v-model="controlMsgForm.accountingType"
              :options="accountingType"
              @change="handleChange"
              :props="prop"
              size="small"
              filterable
              style="width: calc(100% - 9px); margin-left: 9px"
              clearable></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="我方主要股东" style="margin-bottom: 16px; margin-left: -9px" prop="mainShareholder">
            <el-select
              v-model="controlMsgForm.mainShareholderName"
              size="small"
              filterable
              style="width: calc(100% - 9px); margin-left: 9px"
              clearable
              remote
              reserve-keyword
              :remote-method="remoteMethod"
              @change="selectMainHolder"
              placeholder="请输入字段搜索">
              <el-option
                v-for="item in mainShareholder"
                :key="item.code"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营状况" style="margin-bottom: 16px; margin-left: -9px" prop="status">
            <el-select v-model="controlMsgForm.status" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in statusoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="产权取得日期" style="margin-bottom: 16px;" prop="propertyDate">
            <el-date-picker clearable type="date" placeholder="选择日期" v-model="controlMsgForm.propertyDate" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
          <el-form-item label="国有出资情形" style="margin-bottom: 16px;" prop="stateEnterpreiseCapi">
            <el-select v-model="controlMsgForm.stateEnterpreiseCapi" size="small" class="input" clearable>
              <el-option
                v-for="item in cmhkCapitaloptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设立目的/存续理由" style="margin-bottom: 16px; margin-left: -9px" prop="purpose">
            <el-select v-model="controlMsgForm.purpose" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in purposeoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="资本来源类型" style="margin-bottom: 16px; margin-left: -9px" prop="capiSource">
            <el-select v-model="controlMsgForm.capiSource" size="small" class="input" clearable style="width: calc(100% - 9px); margin-left: 9px">
              <el-option
                v-for="item in capiSourceoptions"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否实体" style="margin-bottom: 16px;" prop="isEntity">
            <el-select v-model="controlMsgForm.isEntity" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否特殊目的公司" style="margin-bottom: 16px;" prop="isSpecialPurpose">
            <el-select v-model="controlMsgForm.isSpecialPurpose" size="small" filterable class="input" clearable>
              <el-option
                v-for="item in boleenOption"
                :key="item.index"
                :label="item.value"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import * as api from '@/api/modules/propertyRight.js'
import { getAccountType } from '@/api/modules/systemManage.js'
export default {
  data() {
    return {
      controlMsgForm: {
        organizer: '',
        isManaged: '',
        manageOrgName: '',
        managementOrg: '',
        propertySource: '',
        isRegisterOutside: '',
        registerStatus: '',
        accountingType: '',
        mainShareholder: '',
        status: '',
        propertyDate: '',
        stateEnterpreiseCapi: '',
        purpose: '',
        capiSource: '',
        isEntity: '',
        isSpecialPurpose: ''
      },
      taskIds: {
        taskId: '',
        resource: '',
        companyChiName: '',
        companyEngName: '',
        registerType: ''
      },
      organizeroptions: [],
      propertySourceoptions: [],
      purposeoptions: [],
      capiSourceoptions: [],
      statusoptions: [],
      cmhkCapitaloptions: [],
      registerStatusoptions: [],
      accountingType: [],
      managementOrgOption: [],
      mainShareholder: [],
      rules: {
        organizer: [{ required: true, message: '请选择主办单位', trigger: 'blur' }],
        mainShareholder: [{ required: true, message: '请选择我方主要股东', trigger: 'blur' }],
        propertySource: [{ required: true, message: '请选择产权取得方式', trigger: 'blur' }],
        purpose: [{ required: true, message: '请选择设立目的', trigger: 'blur' }],
        capiSource: [{ required: true, message: '请选择资本来源类型', trigger: 'blur' }],
        accountingType: [{ required: true, message: '请选择会计核算类型', trigger: 'blur' }],
        status: [{ required: true, message: '请选择经营状况', trigger: 'blur' }],
        manageOrgName: [{ required: true, message: '请选择管理单位', trigger: 'blur' }],
      },
      boleenOption: [
        {value: '是', code: '1'},
        {value: '否', code: '0'}
      ],
      prop: {
        label: 'value',
        value: 'code',
        children: 'child'
      }
    }
  },
  mounted() {
    this.cmbusinessTypes()
  },
  methods: {
    // 查询管控信息(此方法在父组件中调用)
    getcontrolMsgForm(params) {
      this.taskIds = params
      api.controlMsgOa(params).then(res => {
        if (res.data.body) {
          if (res.data.body === null) {
            return false
          } else {
            this.controlMsgForm = res.data.body
            const cmhkId = res.data.body.cmhkId
            this.$emit('send-cmhkId', cmhkId)
          }
        }
      })
    },
    // 管理单位/我方主要股东远程搜索
    remoteMethod(query) {
      const data = {
        companyChiName: query
      }
      api.proxyShareholder(data).then(res => {
        this.managementOrgOption = res.data.body
        this.mainShareholder = res.data.body
      })
    },
    selectMainHolder(val) {
      this.controlMsgForm.mainShareholder = val
    },
    selectManageType(val) {
      this.controlMsgForm.managementOrg = val
    },
    // 会计核算类型
    handleChange(val) {
      const len = val.length
      const str = val[len-1]
      this.controlMsgForm.accountingType = str
    },
    cmbusinessTypes() {
      // 主办单位
      api.Organizer().then(res => {
        this.organizeroptions = res.data.body
      })
      // 产权取得方式
      api.propertySource().then(res => {
        this.propertySourceoptions = res.data.body
      })
      // 设立目的/存续理由
      api.purpose().then(res => {
        this.purposeoptions = res.data.body
      })
      // 资本来源类型
      api.capiSource().then(res => {
        this.capiSourceoptions = res.data.body
      })
      // 经营状况
      api.businessStatus().then(res => {
        this.statusoptions = res.data.body
      })
      // 国有出资情形
      api.stateEnterpriseCapi().then(res => {
        this.cmhkCapitaloptions = res.data.body
      })
      // 产权登记情形
      api.registerStatus().then(res => {
        this.registerStatusoptions = res.data.body
      })
      // 会计核算类型
      getAccountType().then(res => {
        this.accountingType = this.getTreeData(res.data.data[0].child)
      })
    },
    getTreeData(data){
      // 循环遍历json数据
      for (let i=0; i<data.length; i++) {
        if (data[i].child.length<1) {
          // children若为空数组，则将children设为undefined
          data[i].child = null
        } else {
          // children若不为空数组，则继续 递归调用 本方法
          this.getTreeData(data[i].child)
        }
      }
      return data
    },
    handleSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const obj = Object.assign(this.controlMsgForm, this.taskIds)
          api.addControlMsg(obj).then(res => {
            if (res.data.code === '0') {
              this.$message.success('保存成功')
              this.getcontrolMsgForm(this.taskIds)
            }
          })
        } else {
          return false
        }
      })
      
    }
  }
}
</script>

<style lang="less" scoped>
  .btn {
    width: calc(100% - 40px);
    display: flex;
    padding: 0 20px;
    margin-bottom: 10px;
  }
  .input {
    width: 100%;
  }
</style>
<style>
  .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 100%;
  }
  .el-form-item__content {
    line-height: 16px;
    position: relative;
    font-size: 14px;
  }
  .el-form-item__error {
    color: #F56C6C;
    font-size: 12px;
    line-height: 1;
    padding-top: 4px;
    position: absolute;
    top: 32px;
    left: 9px;
  }
</style>